<template>
	<view class="newsbroke">
		<view class="uni-textarea">
			<input type="text" v-model="title" class="news-ipnut" placeholder="标题(必填)" />
			<textarea v-model="opinion" class="comment-input" placeholder="详细说明(选填,如 时间 地点 人物)" />
			<!-- <view style="height: 200upx;"> -->
				<scroll-view
						scroll-x="true"
						scroll-into-view="scrollPosition"
						class="scroll-row options-card"
						scroll-with-animation="true"
						show-scrollbar="false"
						style="height: 200upx;margin-left: 2%;"
					>
					<!-- <view class="img-group"> -->
						<view v-for="(item, key) in imgArr" :key='key' :id="'item' + key" class="scroll-row-item" style="position: relative;margin-right: 10px;margin-top: 8px;">
							<image :src="item" style="width: 180upx;height: 180upx;" @tap="imgView"></image>
							<text class="delete" @tap="handleDel(key)">X</text>
						</view>
						<view class="upload" @tap="addimg">
							<text>+</text><br>
							<text>照片</text>
						</view>
					<!-- </view> -->
				</scroll-view>

			<!-- </view> -->

			<input type="text" v-model="mobile" class="news-ipnut" placeholder="你的手机号或微信号(必填,仅用于了解爆料详情)"/>
		</view>
		<view class="comment-btn" @tap="submitOpinion()"><text>提交</text></view>
		<view class="b-end">
			也可以联系我们爆料电话 <text @tap="call" style="color: #0081FF;">010-85767558</text>
		</view>
	</view>
</template>

<script>
import api from '@/common/lib/request.js';
export default {
	data() {
		return {
			title:'',
			mobile:'',
			opinion: '',
			imgArr:[],
			scrollPosition:'item0',
			image:[]
		};
	},
	methods: {
		  call() {
		       uni.makePhoneCall({
		           phoneNumber:  '010-85767558'
		     });
		},
		addimg(){
      console.log('addimg')
			let that = this
			uni.chooseImage({
				count: 6,
				sizeType: ['original', 'compressed'],
				sourceType: ['album'],
				success: function(res) {
					// 预览图片
					that.imgArr = res.tempFilePaths
					for(var i=0;i<res.tempFilePaths.length;i++){
						uni.uploadFile({
						    url: 'http://www.creb.com.cn/api/front/mobile/upload',
						    filePath: res.tempFilePaths[i],
						    name: 'uploadFile',
						    success: (uploadFileRes) => {
						      // alert("上传文件成功：" + uploadFileRes.data.body)
								  that.image.push(JSON.parse(uploadFileRes.data).body)
						    }
						});
					}
				}
			});
		},
		imgView(){
			uni.previewImage({
			    urls: this.imgArr,
			    longPressActions: {
			        itemList: ['发送给朋友', '保存图片', '收藏'],
			        success: function(data) {
			            console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
			        },
			        fail: function(err) {
			            console.log(err.errMsg);
			        }
			    }
			});
		},
		handleDel(id){
			this.imgArr.splice(id,1)
		},
		submitOpinion() {
			let _this = this;
			let token = uni.getStorageSync('token');
			if (!token) {
				uni.showToast({
					title: '请登录后爆料',
					icon: 'none'
				});
				return;
			}
			if (!_this.title.trim() || !_this.mobile.trim() ) {
				uni.showToast({
					title: '请输入标题/手机号',
					icon: 'none'
				});
				return;
			}
			api.request({
				url: '/breaking-news',
				data: {
					content: _this.opinion,
					mobile:_this.mobile,
					title:_this.title,
					image:_this.image.join(',')
				}
			})
				.then(response => {
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					});
					uni.navigateBack({
						delta: 1
					});
				})
				.catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					});
				});
		}
	}
};
</script>

<style>
.newsbroke {
	padding: 40upx 30upx;
}
.comment-input {
	/* border: 1px solid #dcdfe6; */
	height: 360upx;
	border-radius: 12upx;
	font-size: 32upx;
}
.img-group{
	display: flex;
}
.upload{
	display: inline-block;
	width: 120upx;
	height: 120upx;
	font-size: 34upx;
	color: #999;
	text-align: center;
	border: 1px dashed #dcdfe6;
	vertical-align: top;
	margin-top: 50upx;
}
.news-ipnut{
	padding: 9px 2%;
}
.delete{
	position: absolute;
	text-align: center;
	line-height: 20px;
	width: 18px;
	height: 18px;
	border: 1px solid #000000;
	border-radius: 50%;
	right: -8px;
	top: -6px;
	color: #fff;
	background-color: #000000;
	opacity: 0.5;
}
.comment-btn {
	float: right;
	margin-top: 20upx;
	width: 160upx;
	height: 72upx;
	border-radius: 36upx;
	background-color: #005BAC;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
}
.b-end{
	position: absolute;
	bottom: 5px;
	text-align: center;
	width: 720upx;
	font-size: 12px;
	color: #555;
}
</style>
